@import "global";
@import "class";

#tool_right{
	width: 191px;
	height: 100%;
	border-left: 1px solid #191919;
}

#note_meta{
	text-align: left;
	padding: 4px;
	.line{
		margin-bottom: 6px;
		span{
			vertical-align: middle;
		}
		i{
			color: @colorRed;
			font-style: normal;
			vertical-align: middle;
		}
		.tool{
			float: right;
			background-image: url('../img/tool.png');
			background-size: 100px;
			width: 24px;
			height: 24px;
			background-position: -73px -7px;
			background-color: rgba(0,0,0, 0.8);
			.radius(2px);
			display: block;
			margin: 0 auto;
		}
	}
	.line2{
		span{
			color: #aaa;
		}
		i{
			color: @colorRed;
			font-style: normal;
			vertical-align: middle;
		}
	}
	.line3{
		text-align: center;
		margin-bottom: 10px;
		span{
			margin: 0 auto;
		}
	}
	#note_meta_sam, #note_meta_layer{
		width: 150px;
		display: inline-block;
	}
}

#tool_sample{
	width: 100%;
	height: 350px;
	&:hover{

	}
	li{
		text-align: left;
		position: relative;
		.tool{
			display: none;
			position: absolute;
			right: 0;
			top: 3px;
			padding: 0;
			em:nth-child(1){
				background-position: -36px -143px;
			}
			em:nth-child(2){
				background-position: -11px -143px;
			}
			em{
				width: 18px;
				height: 18px;
				background-image: url('../img/tool.png');
				background-size: 120px;
				background-color: rgba(0,0,0, 0.8);
				.radius(2px);
				display: inline-block;
				margin-right: 3px;
			}
		}
		&.ept{
			text-align: center;
		}
		&.curr{
			background: @colorHover;
			color: @colorRed;
		}
		&:hover{
			.tool{
				display: block;
			}
		}
		&.sub{
			border: none;
			background: none;
			&:hover{
				background: none;
				.tool{
					display: none;
				}
			}
			&>div{
				&.curr{
					background: @colorHover;
				}
				&:hover{
					background: @colorHover;
				}
				i, em{
					background: url('../img/tool.png') no-repeat;
					background-size: 140px;
				}
				em{
					width: 28px;
					height: 20px;
					display: inline-block;
					margin: 2px 0 0 3px;
					vertical-align: middle;
				}
			}

			&.on{
				&>div{
					i{
						background-position: -110px -74px;
					}
					em{
						background-position: -40px -96px;
					}
				}
				ul{
					display: block;
				}
			}
			&.off{
				&>div{
					i{
						background-position: -79px -74px;
					}
					em{
						background-position: -8px -96px;
					}
				}
				ul{
					display: none;
				}
			}
		}
		&.subitem{
			span{
				padding-left: 10px;
			}
			&.curr{
				background: @colorHover;
			}
			&:hover{
				.tool{
					display: block;
				}
			}
		}
		i{
			width: 14px;
			height: 14px;
			display: inline-block;
			margin-left: 3px;
			vertical-align: middle;
		}
		span{
			display: inline-block;
			vertical-align: middle;
			margin-left: 4px;
		}
	}

}

#tool_layer{
	width: 100%;
	height: 202px;
	display: none;
	li{
		text-align: center;
		height: 24px;
		text-shadow: 0 0 1px black;
		position: relative;
		em, i{
			background-image: url('../img/tool.png');
		}
		em{
			display: none;
			width: 18px;
			height: 18px;
			background-size: 70px;
			background-position: -121px -4px;
			position: absolute;
			right: 3px;
			top: 3px;
			background-color: rgba(0,0,0, 0.8);
			.radius(2px);
		}
		i{
			width: 24px;
			height: 24px;
			background-size: 140px;
			background-position: -214px -92px;
			display: block;
			margin: 0 auto;
		}
		&.curr{
			color: @colorRed;
		}
		&:hover{
			em{
				display: inline-block;
			}
		}
	}
}

#tool_review{
	height: 202px;
	display: none;
	li{
		text-align: left;
		height: 24px;
		position: relative;
		&.tool{
			text-align: center;
		}
		i{
			background-image: url('../img/tool.png');
		}
		em{
			width: 16px;
			height: 16px;
			display: inline-block;
			margin: 3px;
			vertical-align: middle;
			&.icn0{
				background: #ff9900;
			}
			&.icn1{
				background: #33cc33;
			}
			&.icn2{
				background: #ef6666;
			}
		}
		i{
			width: 24px;
			height: 24px;
			background-size: 140px;
			background-position: -214px -92px;
			display: block;
			margin: 0 auto;
		}
		span{
			vertical-align: middle;
			width: 160px;
			display: inline-block;
		}
	}
}

#tool_pattern{
	width: 92%;
	margin: 2px auto;
	height: 30%;
}